<template>
	<view class="fenlei">
		<uniSearchBar></uniSearchBar>
		<view class="content">
			<view class="left">
				<div class="item" :class='{active:activeIndex == index}' v-for='(item,index) in categoryList' :key='index' @click='activeIndex = index'>
					<text>{{item.cat_name}}</text>
				</div>
			</view>
			<view class="right">

			</view>
		</view>
	</view>
</template>

<script>
	import uniSearchBar from '@/components/search/search.vue'
	export default {
		components: {
			uniSearchBar
		},
		data() {
			return {
				categoryList: [],
				activeIndex:0
			}
		},
		onLoad(){
			this.getcategory()
		},
		methods:{
			async getcategory(){
				this.categoryList = await this.$request({
					url:'/api/public/v1/categories'
				})
				console.log(this.categoryList)
			}
			
			
		}

	}
	
</script>

<style scoped lang='less'>
	.content {
		display: flex;
		position: absolute;
		top: 100rpx;
		left: 0;
		right: 0;
		bottom: 0;

		.left {
			overflow: auto;

			&::-webkit-scrollbar {
				display: none;
			}

			width: 198rpx;

			.item {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #333;
				width: 100%;
				height: 100rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #eeeeee;
				background-color: #f4f4f4;
				
				&.active {
					font-weight: 700;
					color: red;
					position: relative;
					&::before {
						position: absolute;
						content: "";
						left: 0;
						top: 20rpx;
						width: 8rpx;
						height: 60rpx;
						background-color: red;
						
					}
				}
			}
			
		}

		.right {
			flex: 1;
		}
	}
</style>
